<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css">
    <link media="all" type="text/css" href="/js/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">

    <title>Russianexpress</title>
    <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/js/ui.js"></script>

    <script type="text/javascript" src="/js/zoom/mousewheel.js"></script>
    <script type="text/javascript" src="/js/zoom/zoom.js"></script>
    <style type="text/css">
        #viewport {
            width: 900px;
            height: 600px;
            background-color: #808080;
            cursor: move;
            margin: 20px auto;
            overflow: hidden; /*keep map contents from spilling over if JS is disabled*/
        }
        .mapwrapper {
            position: relative;
        }

        .map-control {
            position: absolute;
            top: 30px;
            right: 10px;
            background: url(/images/zoom/map-control.png) no-repeat;
            height: 63px;
            width: 100px;
        }

        .map-control a {
            height: 18px;
            width: 18px;
            display: block;
            text-indent: -999em;
            position: absolute;
            outline: none;
        }

        .map-control a:hover {
            background: #535353;
            opacity: .4;
            filter: alpha(opacity=40);
        }

        .map-control a.left {
            left: 39px;
            top: 22px;
        }

        .map-control a.right {
            left: 79px;
            top: 22px;
        }

        .map-control a.up {
            left: 59px;
            top: 2px;
        }

        .map-control a.down {
            left: 59px;
            top: 42px;
        }

        .map-control a.zoom {
            left: 2px;
            top: 8px;
            height: 21px;
            width: 21px;
        }

        .map-control a.back {
            left: 2px;
            top: 31px;
            height: 21px;
            width: 21px;
        }
    </style>
</head>

<div id="modal" style="display: none;">
    <div style="position: relative;">
        <div id="viewport">

            <div id="pict" style="background: url(/images/zoom/s.png) no-repeat; width: 900px; height: 1350px;">
                <!--top level map content goes here-->
            </div>
            <div style="height: 1800px; width: 1200px;">
                <img id="pict_big" src="/images/zoom/s2.png" alt="" />
                <div class="mapcontent">

                </div>
            </div>
        </div>
<!--        <div class="map-control" id="draggable">-->
<!--                <a href="#left" class="left">Left</a>-->
<!--                <a href="#right" class="right">Right</a>-->
<!--                <a href="#up" class="up">Up</a>-->
<!--                <a href="#down" class="down">Down</a>-->
<!--                <a href="#zoom" class="zoom">Zoom</a>-->
<!--                <a href="#zoom_out" class="back">Back</a>-->
<!--            </div>-->
        <div class="managepdf map-control" id="draggable">

                   <a href="#zoom" class="pdf zoomin zoom" title="Zoom in" ></a>
                   <a href="#out" class="pdf zoomout back" title="Zoom out"></a>
                   <a href="#previous" class="pdf prev left" title="Previous"></a>
                   <a href="#up" class="pdf up rotate" title="Go up"></a>
                    <a href="#down" class="pdf down rotate" title="Go down"></a>
                    <a href="#next" class="pdf next right" title="Next"></a>
                    <a href="#close" class="pdf close" title="Close"></a>

        </div>
    </div>
</div>
<a href="#" id="tt">tt</a>

<script type="text/javascript">
    $('#tt').click(function(){
        $('#modal').dialog({
            resizable: false,
            width:940,
            closeOnEscape:true,
            modal: true,
            bgiframe: true
        });

        $(".ui-dialog-titlebar").hide();
    });

    $( "#draggable" ).draggable();
    $('.ui-widget-overlay').live('click', function() {
        $('#modal').dialog( "close" );
    });

    $('#viewport').height(screen.height-200);
    $(document).ready(function() {
        $("#viewport").mapbox({mousewheel: true});
        $("#viewport").mapbox("center").mapbox("up", 700);
        jQuery(".map-control a").click(function() {//control panel
            var viewport = $("#viewport");
            //this.className is same as method to be called
            if(this.className == "zoom" || this.className == "back") {
                viewport.mapbox(this.className, 2);//step twice
            }
            else {
                if(this.className=='up' || this.className=='down'){
                    viewport.mapbox(this.className, $('#viewport').height()-50);
                }
                if(this.className=='left' || this.className=='right'){
                    console.log('load next pages', this.className=='left');
                }
            }
            return false;
        });
    });
</script>
<body>
</body>
</html>